<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .a{
        width: 800px;
        height: 400px;
        border: 1px dotted black;
    }
    .b{
        width: 500px;
        height: 200px; 
        margin: 100px auto;
        background: #6f9b3a;
        border-radius: 200px;
        box-shadow:0 0 0 10px #e65868,0 0 0 11px #eee,0 0 0 20px #e65868,0 0 0 21px #eee,0 0 0 30px #e65868,0 0 0 31px #eee,0 0 0 40px #e65868,0 0 0 41px #eee,0 0 0 50px #e65868,0 0 0 51px #eee,0 0 0 60px #e65868,0 0 0 61px #eee;

        
    
    }
    .c{
        width: 350px;
        height: 188px;
        border: 2px solid #fff;
        position: relative;
        top: 4px;
        left: 75px;
    }
    .d{
        width: 178px;
        height: 188px;
        border-right: none;

    }
    .e{
        content: '';
        width: 20px;
        height: 60px;
        position: absolute;
        top: 64px;
        border: 2px solid #fff;
        border-left: none;
    }
    .f{
        content:'' ;
        width: 50px;
        height: 120px;
        position: absolute;
        top: 34px;
        border: 2px solid #fff;
        border-left: none;
    }
    .g{
        width: 178px;
        height: 188px;
        border-right: none;
    }
    .h{
        content: " ";
        width: 20px;
        height: 60px;
        position: absolute;
        top: 64px;
        
        border: 2px solid #fff;
        border-left: none;
        transform: rotate(180deg);
    }
    .i{
            content: " ";
            width: 20px;
            height: 60px;
            position: absolute;
            top: 64px;
            
            border: 1px solid #fff;
            border-left: none;
            transform: rotate(180deg);
        }

    
    .j{
        width: 50px;
        height: 50px;
        border: 1px solid #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body>
    <div class="a">
        <div class="b">
            <div class="c">
                <div class="d"></div>
                <div class="e"></div>
                <div class="f"></div>
                </div>
                <div class="g">
                    <div class="h"></div>
                        <div class="i"></div> 
                
            <div class="j"></div> 
            </div>  
            
        </div>
    </div>            
    
</body>
</html>